<template>
  <view v-if="detail" :class="['p-conveniently', {'no-padding': noPadding }]" @click="handleChange">
    <view class="content">
      <view class="header">
        <view class="name">
          <x-image src="/assets/images/svg-03.svg" />
        </view>
        <view class="tag">推荐</view>
        <view :data-value="randomValue" class="tips">用户顺手买过</view>
      </view>
      <view class="product">
        <view class="pic">
          <x-image :src="formatOss(detail.productImgUrl)" />
        </view>
        <view class="info">
          <view class="title">
            {{ detail.productTitle }}
          </view>
          <view class="selling">
            <view class="point">{{ detail.skuInfo || '' }}</view>
            <view class="icon">
              <x-image v-if="select" src="/assets/images/svg-05.svg" />
              <x-image v-else src="/assets/images/svg-04.svg" />
            </view>
          </view>
          <view class="price">
            <view class="value">{{ originalPrice.additionalActivityPrice }}</view>
            <view class="tag">包邮</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';

export default {
  name: 'PConveniently',
  components: {
    XImage
  },
  props: {
    storeId: {
      type: [String, Number],
      default: ''
    },
    productId: {
      type: [String, Number],
      default: ''
    },
    noPadding: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      detail: null,
      select: false
    };
  },
  computed: {
    randomValue() {
      const randomNum = Math.floor(Math.random() * 17) + 82;
      return `${randomNum}%`;
    },
    // 商品原价
    originalPrice() {
      const arr = this.$tools.formatZero(this.detail?.additionalActivityPrice).split('.');
      return {
        value: this.detail?.additionalActivityPrice,
        prefix: arr[0],
        suffix: `.${arr[1]}`,
        productPrice: this.$tools.formatZero(this.detail?.productPrice),
        additionalActivityPrice: this.$tools.formatZero(this.detail?.additionalActivityPrice)
      };
    }
  },
  watch: {},
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.$http({
        error: false,
        url: '/product/app/additional/detail',
        data: {
          storeId: this.storeId,
          productId: this.productId
        }
      }).then(res => {
        this.detail = res.data;
      });
    },
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 300);
    },
    handleChange() {
      this.select = !this.select;
      this.$emit('change', this.select ? this.detail : null);
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-conveniently{
    padding: 16px 16px 0 16px; background-color: #f6f6f6;
    &.no-padding{
      padding: 0;
    }
    .content{ background-color: #fff; border-radius: 26px; padding: 20px;}
    .header{
      display: flex; align-items: center; padding-bottom: 25px;
      .name{ width: 180px; height: 48px; margin-left: -10px;}
      .tag{
        margin-left: 8px; margin-right: 18px; line-height: 1; padding: 6px 8px; background: $uni-color-primary; color: #fff; border-radius: 6px; font-size: 24px;
      }
      .tips{
        color: $uni-color-primary; font-size: 28px; display: flex; align-items: center; line-height: 1;
        &:before{ content: attr(data-value); font-size: 32px;}
      }
    }
    .product{
      display: flex; align-items: center;
      .pic{ width: 240px; height: 240px; border-radius: 22px; overflow: hidden; margin-right: 20px;}
      .info{
        flex: 1;
        .title{ color: #323232; font-size: 30px; font-weight: bold; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 20px;}
        .selling{
          display: flex; align-items: center; margin-bottom: 10px;
          .point{ font-size: 26px; flex: 1; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 40px;}
          .icon{ width: 50px; height: 50px;}
        }
        .price{
          display: flex; align-items: center; color: $uni-color-primary;
          .value{
            display: flex; align-items: flex-end; line-height: 1; margin-right: 10px; font-size: 46px; font-weight: bold;
            &:before{ content: '￥'; font-size: 24px; padding-bottom: 5px;}
          }
          .tag{
            line-height: 1; font-size: 22px; border: 2px solid $uni-color-primary; border-radius: 6px; padding: 4px 5px;
          }
        }
      }
    }
  }
</style>
